<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            /* overflow: hidden; */
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: yellow;
        }

        #arr {
            display: none;
            z-index: 1000;

        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>

<body>
    <div class="all" id='box'>
        <div class="screen" id="screen">
            <ul id="ul">
                <li><img src="images/wf1.jpg" width="500" height="200" /></li>
                <li><img src="images/wf2.jpg" width="500" height="200" /></li>
                <li><img src="images/wf3.jpg" width="500" height="200" /></li>
                <li><img src="images/wf4.jpg" width="500" height="200" /></li>
                <li><img src="images/wf5.jpg" width="500" height="200" /></li>
            </ul>
            <ol id="ol">
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>
    <script>
        function animate(obj, target) {
            //把timerId当作为obj对象的属性 
            clearInterval(obj.timerId);
            //需要一个定时器
            obj.timerId = setInterval(function () {
                //用于获取元素的当前位置 
                var current = obj.offsetLeft;
                var step = 10;
                //如果目标位置 大于当前位置时 应该是从左往在 如果目标位置小于当前位置 从右到左
                step = target > current ? step : -step;

                //如果目标位置减去当前位置的绝对值 大于 步长值 的绝对值  
                if (Math.abs(target - current) > Math.abs(step)) {

                    current += step;
                    obj.style.left = current + "px";
                } else {
                    clearInterval(obj.timerId);
                    obj.style.left = target + "px";
                }
            }, 15);
        }

        function my$(id) {
            return document.getElementById(id);
        }

    </script>
    <script>
        var boxObj = my$("box");
        var screenObj = my$("screen");
        var ulObj = my$("ul");
        var lisObj = ulObj.children;
        var olObj = my$("ol");
        var arrObj = my$("arr");
        var leftObj = my$("left");
        var rightObj = my$("right");

        //先生成ol下面的li 它的个数是由lisObj来决定的
        for (var i = 0; i < lisObj.length; i++) {
            //创建li标签对象
            var liObj = document.createElement("li");
            liObj.innerHTML = i + 1;
            olObj.appendChild(liObj);
            //判断如果i的时候 应该给它加一个class属性值为 current
            if( i == 0){
                liObj.setAttribute("class","current");
            }
        }


    </script>
</body>

</html>